import { getHospitalSetList } from '@/api/hospital/hospitalSet'
import { IHospitalSetItem, IHospitalSetList } from '@/api/hospital/model/hospitalSetTypes';
import { Button, Form, Input, Card, Space, Table } from 'antd'
import { EditOutlined, DeleteOutlined, SearchOutlined } from '@ant-design/icons'
import { ColumnsType } from 'antd/lib/table'
import React, { useEffect, useState } from 'react'

export default function HospitalSet() {
    // 创建form对象
    const [form] = Form.useForm();
    // 6. 声明相关状态
    let [page, setPage] = useState<number>(1); // 当前页状态
    let [pageSize, setPageSize] = useState<number>(3);// 每页显示几条
    let [total, setTotal] = useState<number>(10);// 总条数
    let [hospitalSetList, setHospitalSetList] = useState<IHospitalSetList>([])
    let [hosname, setHosname] = useState<string>();
    let [hoscode, setHoscode] = useState<string>();

    const columns: ColumnsType<any> = [
        {
            title: '序号',
            width: 60,
            align: 'center',
            render(value: any, row: any, index: number) {
                return (page - 1) * pageSize + (index + 1)
            }
        },
        {
            title: '医院名称',
            dataIndex: 'hosname'
        },
        {
            title: '医院编号',
            dataIndex: 'hoscode'
        },
        {
            title: 'api基础路径',
            dataIndex: 'apiUrl'
        },
        {
            title: '签名',
            dataIndex: 'signKey'
        },
        {
            title: '联系人姓名',
            dataIndex: 'contactsName'
        },
        {
            title: '联系人手机号',
            dataIndex: 'contactsPhone'
        },
        {
            title: '操作',
            fixed: 'right',
            width: 100,
            render(row: IHospitalSetItem) {
                return (
                    <Space>
                        <Button type='primary' icon={<EditOutlined />}></Button>
                        <Button type='primary' danger icon={<DeleteOutlined />}></Button>
                    </Space>
                )
            }
        }

    ]
    const onFinish = () => {
        console.log('onFinish');
        // 通过form对象获取表单元素的值
        let { hosname, hoscode } = form.getFieldsValue()
        console.log(hosname, hoscode);
        // 重置状态
        setHosname(hosname);
        setHoscode(hoscode);
        page !== 1 && setPage(1);
    }
    // 清空表单数据
    const clear = ()=>{
        // 将hosname,hoscode的状态数据清空【undefined】
        // 将表单数据清空
        setHosname(undefined);
        setHoscode(undefined);
        form.resetFields();
        page !== 1 && setPage(1);
    }
    // 5. 调用api函数，获取医院列表数据并设置状态
    async function _getHospitalSetList() {
        let { records, total } = await getHospitalSetList({ page, limit: pageSize, hosname, hoscode })
        console.log(records, total);
        // 设置状态
        setHospitalSetList(records);
        setTotal(total);
    }
    // componentDidMount
    useEffect(() => {
        _getHospitalSetList();
    }, [page, pageSize, hosname, hoscode])
    return (
        <Card>
            {/* 1. 表单区域 */}
            <Form
                // 绑定form
                form={form}
                layout='inline'
                name="basic"
                onFinish={onFinish}

            >
                <Form.Item
                    name="hosname"
                >
                    <Input placeholder='医院名称' />
                </Form.Item>

                <Form.Item
                    name="hoscode"
                >
                    <Input placeholder='医院编号' />
                </Form.Item>


                <Form.Item >
                    <Space>
                        <Button type="primary" htmlType="submit" icon={<SearchOutlined />}>
                            查询
                        </Button>
                        <Button htmlType="submit" disabled={!hosname && !hoscode ? true : false} onClick={clear}>
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
            {/* 2. 按钮 */}
            <Space className='mt'>
                <Button type='primary'>添加</Button>
                <Button disabled>批量删除</Button>
            </Space>
            {/* 3. 表格 */}
            <Table
                scroll={{ x: 1300 }}
                rowKey={'id'}
                className='mt'
                columns={columns}
                dataSource={hospitalSetList}
                pagination={{
                    current: page,
                    total,
                    pageSize,
                    showQuickJumper: true,
                    showSizeChanger: true,
                    pageSizeOptions: [5, 10, 20],
                    showTotal(total: number) {
                        return (
                            <div>总条数: {total}</div>
                        )
                    },
                    onChange(page: number, pageSize: number) {
                        // 重置分页
                        setPage(page);
                        setPageSize(pageSize);
                    }
                }}
            />
        </Card>
    )
}
